<template>
  <div class="index">
    <div class="index1 index3" id="index1" style="height: 29%;">
      <div class="index4">
        <img style="width:50px;height:50px" src="../../../assets/image/yonghu.png">
        <div style="margin-left:10px">用户数量:{{userNum}}</div>
      </div>
      <div class="index4">
        <img style="width:50px;height:50px" src="../../../assets/image/fenxiang.png">
        <div style="margin-left:10px">美食分享数量:{{foodNum}}</div>
      </div>
    </div>
    <div class="index1">
      <div class="index5" id="index5">

      </div>
      <div class="index6" id="index6">

      </div>
    </div>
  </div>
</template>

<script>
  import {indexManage} from '../../../api/api'
  import * as echarts from "echarts";
  export default {
    data() {
      return{
        userNum: 0,
        foodNum: 0,
        pieChart: null,
        lineChart: null,
      }
    },
    methods: {
      init() {
        indexManage().then(res => {
          if (res.code == 1000) {
            this.userNum = res.data.userNum
            this.foodNum = res.data.foodNum
            var chartDom = document.getElementById('index5');
            var myChart = echarts.init(chartDom);
            var option;
            option = {
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'cross',
                  label: {
                    backgroundColor: '#6a7985'
                  }
                }
              },
              xAxis: {
                type: 'category',
                data: res.data.nameList
              },
              yAxis: {
                type: 'value'
              },
              series: [
                {
                  data: res.data.commentList,
                  type: 'bar'
                }
              ]
            };
            option && myChart.setOption(option);

            var chartDom1 = document.getElementById('index6');
            var myChart1 = echarts.init(chartDom1);
            var option1;

            option1 = {
              tooltip: {
                trigger: 'item'
              },
              legend: {
                top: '5%',
                left: 'center'
              },
              series: [
                {
                  type: 'pie',
                  radius: ['40%', '70%'],
                  avoidLabelOverlap: false,
                  itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                  },
                  label: {
                    show: false,
                    position: 'center'
                  },
                  emphasis: {
                    label: {
                      show: true,
                      fontSize: 40,
                      fontWeight: 'bold'
                    }
                  },
                  labelLine: {
                    show: false
                  },
                  data: res.data.typeList
                }
              ]
            };

            option1 && myChart1.setOption(option1);
          }
        })
      }
    },
    created() {
     
    },
    mounted() {
      this.init()
    }
 }
</script>

<style scoped>
  .index {
    width: 100%;
    height: 100%;
    font-family: '黑体';
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .index1 {
    width: 100%;
    height: 69%;
    margin-bottom: 1%;
    display: flex;
    justify-content: space-between;
  }
  .index3 {
    display: flex;
    align-items: center;
    justify-content: space-between;    
  }
  .index4 {
    width: 49.5%;
    height: 100%;
    display: flex;
    background-color: #ffffff;
    align-items: center;
    justify-content: center;
    font-size: 20px;
  }
  .index5 {
    width: 49.5%;
    height: 100%;
    background-color: #ffffff;
  }
  .index6 {
    width: 49.5%;
    height: 100%;
    background-color: #ffffff;
  }
</style>